<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		body{
			/*视距：眼睛到屏幕的距离  视距越大效果越不明显，视距越小效果越明显*/
			perspective: 300px;
		}
			img {
				width:150px;
				margin: 150px;
				transform-origin:top left;
				transition: all 3s;
			}
			img:hover{
				/*rotate  2D旋转*/
				/* transform: rotate(360deg); */
				/*rotateX 3D旋转*/
				transform:rotateX(360deg);
				/* transform:rotateY(360deg); */
				/* transform: translateZ(100px); *//*不能超过视距，超过就看不到了*/
			}
			
			div{
				width: 200px;
				/* background-color: skyblue; */
				transform: translate3d(0px,50px,0px);
				transition: all 1s;
			}
			div:hover{
				transform: translate3d(0px,0px,0px);
			}
		</style>
	</head>
	<body>
		<img src="img/2.png" />
		
		<div>transfrom -> translate3d</div>
	</body>
</html>
